<!--  -->
<template>
  <div class="redact">
    <div class="title_content">
      <span> 管理系统名称：</span>
      <input type="text" v-model="text_content">
    </div>
    <div class="img">
      <!-- 标题 -->
       <!-- 后台登陆背景图 -->
      <div class="icon_img">
        <span class="text">后台登录页面背景图：</span>
        <el-upload
          class="avatar-uploader"
          action="https://api.xujiangyu.com/admin/upimage/"
          :show-file-list="false"
          :before-upload="beforeAvatarUpload_four"
          :on-success="handleAvatarSuccess_three"
        >
          <img v-if="imageUrl_three" :src="imageUrl_three" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
    </div>
      <!-- 小程序公告图标 -->
      <div class="icon_img">
        <span class="text">小程序公告图标：</span>
        <el-upload
          class="avatar-uploader"
          action="https://api.xujiangyu.com/admin/upimage/"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload_one"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
      <!-- 个人中心背景图 -->
      <div class="icon_img">
        <span class="text">小程序个人中心背景图：</span>
        <el-upload
          class="avatar-uploader"
          action="https://api.xujiangyu.com/admin/upimage/"
          :show-file-list="false"
          :on-success="handleAvatarSuccess_one"
          :before-upload="beforeAvatarUpload_two"
        >
          <img v-if="imageUrl_one" :src="imageUrl_one" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
      <!-- 授权登陆背景图 -->
      <div class="icon_img">
        <span class="text">小程序授权登录页面背景图：</span>
        <el-upload
          class="avatar-uploader"
          action="https://api.xujiangyu.com/admin/upimage/"
          :show-file-list="false"
          :before-upload="beforeAvatarUpload_three"
          :on-success="handleAvatarSuccess_two"
        >
          <img v-if="imageUrl_two" :src="imageUrl_two" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
     
    <div class="flooter">
      <div class="color">
        <!-- 公告字体颜色 -->
        <span class="text">小程序公告字体颜色</span>
        <el-color-picker v-model="color1"></el-color-picker>
      </div>
      <div class="color">
        <!-- 公告背景颜色 -->
        <span class="text">小程序公告背景颜色</span>
        <el-color-picker v-model="color2"></el-color-picker>
      </div>
      <div class="color">
        <!-- 底部授权 -->
        <span class="text">是否显示小程序个人中心底部授权</span>
        <el-switch v-model="value" active-color="#13ce66" active-value="1" inactive-value="0"></el-switch>
      </div>
    </div>
    <div class="title">
       <span class="texeS">小程序个人中心底部授权展示内容：</span>
       <vue-ueditor-wrap v-model="msg" :config="myConfig"></vue-ueditor-wrap>
    </div>
    
    <button class="but" @click="submit()">确认提交</button>
  </div>
</template>

<script>
import axios from "axios";
import VueUeditorWrap from "vue-ueditor-wrap";
export default {
  data() {
    return {
      // 本地路径图片
      imageUrl: "", //公告图标
      imageUrl_one: "", //个人中心背景图
      imageUrl_two: "", //授权登录背景图
      imageUrl_three: "", //后台登录背景
      // 以下是返回后台的图片网络路径
      img_gg: "", //公告图标
      img_myself: "", //个人中心图
      img_sq: "", //授权登录图
      img_ht: "", //后台背景图
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      token: {
        token: this.publick.token()
      },
      color1: "", //公告字体颜色
      color2: "", //公告背景颜色
      value: "", //0不展示1展示
      api:'https://api.xujiangyu.com/admin',//上传图片域名
       msg:'',//富文本内容
      myConfig: {
        // 编辑器不自动被内容撑高
        autoHeightEnabled: true,
        // 初始容器高度
        initialFrameHeight: "500",
        // 初始容器宽度
        initialFrameWidth: "95%",
        // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
        serverUrl: "http://35.201.165.105:8000/controller.php",
        // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2
        UEDITOR_HOME_URL: "/UEditor/"
      },
      text_content:'',//标题
    };
  },
  components:{VueUeditorWrap},
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    this.$api
      .RedactGet({
        token: this.publick.token()
        // token: "ef8ea70cef760589cf27968ee20e638e"
      })
      .then(res => {
        console.log(res);
        let data = res.data;
        this.imageUrl = data.notice_image;
        this.imageUrl_one = data.header_backgroundimage;
        this.imageUrl_two = data.login_image;
        this.imageUrl_three = data.admin_login_image;
        this.img_gg = data.notice_image;
        this.img_myself = data.header_backgroundimage;
        this.img_sq = data.login_image;
        this.img_ht = data.admin_login_image;
        this.color1 = data.notice_font_color;
        this.color2 = data.notice_background_color;
        this.value = data.person_bottom_show;
        this.msg = data.person_bottom;
        this.text_content = data.admin_login_title;
      })
      .catch(res => {
        console.log(res);
      });
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  methods: {
    //   四张图片上传成功是函数
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    handleAvatarSuccess_one(res, file) {
      this.imageUrl_one = URL.createObjectURL(file.raw);
    },
    handleAvatarSuccess_two(res, file) {
      this.imageUrl_two = URL.createObjectURL(file.raw);
    },
    handleAvatarSuccess_three(res, file) {
      this.imageUrl_three = URL.createObjectURL(file.raw);
    },
    // 四张图片上传之前的函数
    beforeAvatarUpload_one(file) {
      const isJPG = file.type === "image/jpeg";
      const isGIF = file.type === "image/gif";
      const isPNG = file.type === "image/png";
      const isBMP = file.type === "image/bmp";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG && !isGIF && !isPNG && !isBMP) {
        this.common.errorTip("上传图片必须是JPG/GIF/PNG/BMP 格式!");
      }
      if (!isLt2M) {
        this.common.errorTip("上传图片大小不能超过 2MB!");
      }
      // 上传图片
      var param = new FormData();
      param.append("images", file, file.name);
      param.append("token", this.publick.token());
      let config = {
        headers: {
          "Content-Type": "multipart/form-data"
        }
      };
      axios
        .post(this.api +  "/upimage", param, config)
        .then(response => {
          console.log(response)
          this.img_gg = response.data.data.images;
        });
      return (isJPG || isBMP || isGIF || isPNG) && isLt2M;
    },
    beforeAvatarUpload_two(file) {
      const isJPG = file.type === "image/jpeg";
      const isGIF = file.type === "image/gif";
      const isPNG = file.type === "image/png";
      const isBMP = file.type === "image/bmp";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG && !isGIF && !isPNG && !isBMP) {
        this.common.errorTip("上传图片必须是JPG/GIF/PNG/BMP 格式!");
      }
      if (!isLt2M) {
        this.common.errorTip("上传图片大小不能超过 2MB!");
      }
      // 上传图片
      var param = new FormData();
      param.append("images", file, file.name);
      param.append("token", this.publick.token());
      let config = {
        headers: {
          "Content-Type": "multipart/form-data"
        }
      };
      axios
        .post(this.api + "/upimage", param, config)
        .then(response => {
          this.img_myself = response.data.data.images;
        });
      return (isJPG || isBMP || isGIF || isPNG) && isLt2M;
    },
    beforeAvatarUpload_three(file) {
      const isJPG = file.type === "image/jpeg";
      const isGIF = file.type === "image/gif";
      const isPNG = file.type === "image/png";
      const isBMP = file.type === "image/bmp";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG && !isGIF && !isPNG && !isBMP) {
        this.common.errorTip("上传图片必须是JPG/GIF/PNG/BMP 格式!");
      }
      if (!isLt2M) {
        this.common.errorTip("上传图片大小不能超过 2MB!");
      }
      // 上传图片
      var param = new FormData();
      param.append("images", file, file.name);
      param.append("token", this.publick.token());
      let config = {
        headers: {
          "Content-Type": "multipart/form-data"
        }
      };
      axios
        .post(this.api + "/upimage", param, config)
        .then(response => {
          this.img_sq = response.data.data.images;
        });
      return (isJPG || isBMP || isGIF || isPNG) && isLt2M;
    },
    beforeAvatarUpload_four(file) {
      const isJPG = file.type === "image/jpeg";
      const isGIF = file.type === "image/gif";
      const isPNG = file.type === "image/png";
      const isBMP = file.type === "image/bmp";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG && !isGIF && !isPNG && !isBMP) {
        this.common.errorTip("上传图片必须是JPG/GIF/PNG/BMP 格式!");
      }
      if (!isLt2M) {
        this.common.errorTip("上传图片大小不能超过 2MB!");
      }
      // 上传图片
      var param = new FormData();
      param.append("images", file, file.name);
      param.append("token", this.publick.token());
      let config = {
        headers: {
          "Content-Type": "multipart/form-data"
        }
      };
      axios
        .post(this.api + "/upimage", param, config)
        .then(response => {
          this.img_ht = response.data.data.images;
        });
      return (isJPG || isBMP || isGIF || isPNG) && isLt2M;
    },
    // 点击提交按钮事件
    submit() {
      console.log(this.value)
      this.$api
        .RedactSet({config:{
          notice_image: this.img_gg,
          notice_font_color: this.color1,
          notice_background_color: this.color2,
          header_backgroundimage: this.img_myself,
          login_image: this.img_sq,
          admin_login_image: this.img_ht,
          person_bottom_show: this.value,
          person_bottom:this.msg,
          admin_login_title:this.text_content
          },
          token: this.publick.token()
        })
        .then(res => {
            this.$message({
            type: "success",
            message: res.message
          });
        })
        .catch(res => {
          console.log(res);
        });
    }
  }
};
</script>
<style scoped>
/* @import url(); 引入css类 */
.redact {
  background: #fff;
  width: 50%;
  margin: auto;
  height: 89vh;
  overflow: auto;
}
/* 上传图片样式 */
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 75%;
  display: block;
}
.text {
  display: block;
  width: 50%;
}
.icon_img {
  display: flex;
  width: 100%;
  margin: auto;
  margin-top: 4vh;
  justify-content: flex-start;
  align-items: center;
}
.img {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  margin-top: 3vh;
}
.flooter {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 10vh;
}
.color {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 2vh;
}
.but {
  display: flex;
  width: 30%;
  height: 5vh;
  background: #25d22d;
  color: #fff;
  font-size: 16px;
  justify-content: center;
  align-items: center;
  margin: auto;
  margin-top: 10vh;
  outline: none;
}
.title{
  display: flex;
  flex-direction: column;
}
.texeS{
  height: 10vh;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}
.title_content{
  width: 80%;
  display: flex;
  align-items: center;
}
.title_content input{
  display: block;
  height: 3vh;
  width: 75%;
  border-radius: 5px;
  outline: none;
  text-indent: 1.5em;
}
</style>